問題描述
從局部視圖打開一個彈出窗口並重新加載父局部視圖 (open a popup from partial view and reload the parent partial view)
I tried different ways, played around with javascript and ajax. Please help if you encountered this situation before
I have a view hfnlp.cshtml
@model IMONLP.Models.HFADMwrap
@using ADM
@{
ViewBag.Title = "HFNLP";
}
<html>
<script src="~/Scripts/jquery‑1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive‑ajax.js"></script>
<body>
**<div id="popup">
@if (true)
{
Html.RenderPartial("popup", Model);
}
</div>**
<div id="Quadrant">
@if (@Model.flag == 1)
{
Html.RenderPartial("grid", Model);
}
</div>
</body>
</html>
I have this popup.cshtml which is a partial view of above view. There would be a pop which opens and gets the content from the user. It has to do these things. 1. get the content, write it to model 2. close the popup 3. get the control back to parent and the parent shouldnt reload, I'm fine if popup.cshtml(partial view)‑ [part of parent winodw reloads] reloads.
Here is popup.cshtml
@model IMONLP.Models.HFADMwrap
@{
ViewBag.Title = "popup";
}
<html>
<script src="~/Scripts/jquery‑1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive‑ajax.js"></script>
<script type="text/javascript">
//pop up window
$(function () {
$('#ClickMe').click(function () {
window.open('@Url.Action("FileUpload", "HFNLP")', 'FileUpload', 'height=' + (window.screen.height ‑ 100) + ',width=700,left=' + (window.screen.width ‑ 250) + ',top=10,status=no,toolbar=no,resizable=yes,scrollbars=yes');
});
});
</script>
<body>
<input type="button" id="ClickMe" name="ClickMe" value="New Visit"/>
</body>
</html>
Clicking on the button should open the popup
Finally, fileupload.cshtml which is a pop up window thats called when clicked on the button
@model IMONLP.Models.HFADMwrap
@using ADM
@{
ViewBag.Title = "FileUpload";
}
<html>
<script src="~/Scripts/jquery‑1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('#ClickMe').click(function () {
//window.opener.location.href = '@Url.Action("AfterUpload", "HFNLP", new { wrap=@Model})';*@
window.opener.location.href = window.opener.location.href;
window.close();
});
});
</script>
<body>
<br />
@using (Html.BeginForm("AfterUpload", "HFNLP"))
{
<input type="button" value="submit & View Codes" style="position: absolute; left: auto; width: auto;" id="ClickMe" name = "ClickMe"/>
@*<input type="hidden" name="a" value="@Model.Hfnlp.unstructured_text"/>*@
@if (!string.IsNullOrEmpty(Model.Hfnlp.unstructured_text))
{
@Html.TextAreaFor(m => m.Hfnlp.unstructured_text, new { name= "textBox1", @value = Model.Hfnlp.unstructured_text, style = "width: 650px; height: 400px;"})
}
else
{
@Html.TextAreaFor(m => m.Hfnlp.unstructured_text, new { style = "width: 650px; height: 400px;" })
}
}
@using (Html.BeginForm("FileUploadw", "hfNLP", FormMethod.Post, new { enctype = "multipart/form‑data" }))
{
<input type="file" name="file" id="file" /><br />
<input type="submit" value="Upload" name="submit" />
}
</body>
</html>
With this present code, I ma able to get the pop up window and call the action of a controller and close pop up. Then, entire parent page reloads. I'm loosing the data which is passed to model. Please help me out of this situation.
***********EDIT***********
public ActionResult FileUpload(HFADMwrap wrap)
{
HFNLP hf = new HFNLP();
wrap.Hfnlp = hf;
return View("FileUpload", wrap);
}
public ActionResult FileUploadw(HFADMwrap wrap, HttpPostedFileBase file)
{
HFNLP hf = new HFNLP();
if (wrap.Hfnlp == null)
{
wrap.Hfnlp = hf;
}
file = Request.Files[0];
BinaryReader b = new BinaryReader(file.InputStream);
byte[] binData = b.ReadBytes(file.InputStream.Length.ToInt32());
string filecontent = System.Text.Encoding.UTF8.GetString(binData);
hf.unstructured_text = filecontent;
/*upload and get the file content */
if (wrap.Hfnlp.unstructured_text == null)
{
return RedirectToActionPermanent("FileUpload", "FileUpload");
}
wrap.Hfnlp = hf;
return PartialView("FileUpload", wrap);
}
I tried this now
<div id="popup">
<input type="button" value="something" onClick="?(What should be here)"/></div>
參考解法
方法 1:
I use jquery ui dialog for work like this. There is no reason to load the partial right on the view.
In my *.cshtml i have a div which will eventually become my dialog
<div id="delegateDialog" class="actionDialog"></div>
Then, when a specific button is clicked, this method would be called to load the dialog:
var loadDelegateDialog = function(processInstanceID, serialNumber) {
var $dialog = $('#delegateDialog');
var title = "Delegate Workflow #" + processInstanceID;
var actionUrl = '@Url.ActionFor((TaskListController c) => c.GetDelegateDialog(Model.TaskListID, null, null))';
$.ajax({
url: actionUrl,
type: 'POST',
data: {
processInstanceID: processInstanceID,
serialNumber: serialNumber
},
dataType: 'html',
success: function(data) {
$dialog.html(data);
$dialog.dialog({
autoOpen: true,
closeOnEscape: false,
modal: true,
resizable: false,
draggable: false,
dialogClass: "no‑close",
maxHeight: 600,
width: 500,
position: { my: "top", at: "top+20", of: window },
hide: { effect: "fade", duration: 250 },
show: { effect: "fade", duration: 250 },
title: title,
close: function () {
// call a method to reload your parent page via ajax
}
});
},
error: function(jqXhr, textStatus, errorThrown) {
$.notifyBar({
html: jqXhr.responseText,
cls: 'error',
delay: 10000
});
}
});
};
The loadDelegateDialog js method makes a call to my controller to GetDelegateDialog which returns a partial view. The contents are then placed into the dialog.
Here is the controller method:
[HttpPost]
public PartialViewResult GetDelegateDialog(int id, int? processInstanceID, string serialNumber)
{
var taskListID = id;
if (!processInstanceID.HasValue)
{
throw new InvalidOperationException(Resources.Web_ErrorMsg_MissingProcessIntanceID);
}
if (string.IsNullOrWhiteSpace(serialNumber))
{
throw new InvalidOperationException(Resources.Web_ErrorMsg_MissingSerialNumber);
}
var model = this.taskListService.BuildDelegateDialogViewModel(taskListID, processInstanceID.Value, serialNumber);
return this.PartialView("_DelegateDialog", model);
}
Have the dialog's close method them make a call to another js method that can either refresh/reload the page, OR, if you don't want a full reload, make an AJAX call to get the data you want and populate the appropriate sections of your page.